﻿@model WebApplication.Models.GameModel

@{
    ViewBag.Title = "Game";
}

@section JavaScript
{
<script type="text/javascript">
    function checkForUpdate() {
        var url = "WaitForMove"
        if (!location.href.contains('/Game/Game'))
            url = "Game/WaitForMove"
        $.ajax({
            url:url,
            data: { status: "@Model.Status" },
            timeout:10000,
            success: function (result) {
                if (result == "True")
                    $("form").submit();
                else
                    setTimeout(checkForUpdate,100);
            },
            error: function () {
                setTimeout(checkForUpdate, 100);
            }
        });
    }

    @if (Model.Status != WebApplication.Models.GameStatus.Finished
        && Model.Status != WebApplication.Models.GameStatus.ReadyForMove) {
        @: setTimeout(checkForUpdate);        
    }


</script>
}


@using (Html.BeginForm("Game", null, FormMethod.Post, new { id = "form" })) {


@Html.HiddenFor(model => model.MyNumber)
@Html.HiddenFor(model => model.Nickname)
@Html.HiddenFor(model => model.OponentNickname)
@Html.HiddenFor(model => model.Type)    

<div class="gamewindow" >
          
    <div class="title">	               
		<span>A game of   @(Model.Type). </span>
    </div>        

    @*----- Game info panel ------*@
    
	<div class="info">
		@if (Model.Status != WebApplication.Models.GameStatus.WaitingForOtherPlayers) {
		<div style="float:right;margin-left:1em;vertical-align:central"><div class="mark">@(Model.MyNumber == 0 ? "x" : "o")</div></div>
		
		<div style="float:right;text-align:right">
			<span >oponent</span><br/>
			<span style="font-size:1.5em">@Model.OponentNickname</span>
		</div>
						
		<div style="float:left;margin-right:1em"><span class="mark">@(Model.MyNumber == 0 ? "o" : "x")</span></div>
  }
		
		<div style="width:100px; text-align:left;margin-right:auto">
			<span >you</span><br/>
			<span style="font-size:1.5em">@Model.Nickname</span> 		
		</div>
						
    </div>
    <div class="status">@switch (Model.Status) {
                            case WebApplication.Models.GameStatus.WaitingForOtherPlayers:
                @: Waiting for an oponent to join the game...
                break;
                            case WebApplication.Models.GameStatus.WaitingForMove:
                @:Waiting for the oponent to make a move... 
                break;
                            case WebApplication.Models.GameStatus.ReadyForMove:
                @: It's your move!
                break;
                            case WebApplication.Models.GameStatus.Finished:
                @: Game is finished, did you win?
                break;
                            default:
                break;
                        }    
    </div>
    
    
    <input name="move_row" type="hidden" id="move_row"/>
    <input name="move_col" type="hidden" id="move_col"/>
    <div class="content">
    <table style="display:inline">    
     @for (int row = 0; row < 3; row++) {
        <tr>
        @for (int col = 0; col < 3; col++) {
            <td   style='text-align:center; width:50px;height:50px;padding:0;vertical-align:center;
                @( col > 0 ? "border-left:1px solid gray" : "") ;
                @( row > 0 ? "border-top:1px solid gray" : "");' >
            @if (Model.Situation[row][col] == "0") {
                <div class="mark">o</div>
            }
            @if (Model.Situation[row][col] == "1") {
                <div class="mark">x</div>
            }                       
            @if (Model.Situation[row][col] == " " && Model.Status == WebApplication.Models.GameStatus.ReadyForMove) {
                <div class="mark field" onclick="move_row.value=@row;move_col.value=@col;form.submit();">
                    @(Model.MyNumber == 0 ? "o" : "x")

                </div>
            }                         
        </td>
        }
        </tr>
     }
    </table>    
    </div>

</div>
    
<input type="submit" />    
@*
        
<table border="1">
    <tr>
        <td >@Html.Partial("_field",Model,new{x=0,y=0})</td>
        <td style="border-left:gray solid 1px;text-align:center ">@Model.Situation[0][1]</td>
        <td style="border-left:gray solid 1px ">@Model.Situation[0][2]</td>
    </tr>
    <tr>
        <td style="border-top:gray solid 1px">@Model.Situation[1][0]</td>
        <td style="border-left:gray solid 1px; border-top:gray solid 1px">@Model.Situation[1][1]</td>
        <td style="border-left:gray solid 1px; border-top:gray solid 1px">@Model.Situation[1][2]</td>
    </tr>
    <tr>
        <td style="border-top:gray solid 1px">@Model.Situation[2][0]</td>
        <td style="border-left:gray solid 1px; border-top:gray solid 1px">@Model.Situation[2][1]</td>
        <td style="border-left:gray solid 1px; border-top:gray solid 1px">@Model.Situation[2][2]</td>
    </tr>

</table>    
*@
    
}
    